<style>
    .ivu-btn-primary {
        /* 《车主信息审核》“审阅资料”按钮 */
        color: #6b68ed;
        background-color: #ffe986;
        border-color: #ffe986;
    }
    
    .ivu-btn {
        /* 此页面所有按钮 */
        color: #6b68ed;
        font-weight: bold;
        border: 2px solid #ffe986;
    }
    
    .ivu-input {
        /* 输入框 */
        border: 2px solid #ffe986;
    }
    
    .ivu-input-search i {
        /* 搜索框的i图标 */
        color: #ffe985;
    }
    /* .ivu-input-group-append, .ivu-input-group-prepend {
         搜索框的边框
        border: 3px solid #ffe986 !important;
    }
   .ivu-input-search {
       搜索框的背景色
        background: #ffe986!important;
    } */
    
    .ivu-table th {
        /* 《车主信息审核》表格表头 */
        background-color: rgba(255, 232, 134, 0.3);
    }
    
    .ivu-table-stripe .ivu-table-body tr:nth-child(2n) td,
    .ivu-table-stripe .ivu-table-fixed-body tr:nth-child(2n) td {
        /* 表格间隔 */
        background-color: rgba(255, 232, 134, 0.1);
    }
</style>

<div id="audit" style="background: #fff; padding: 24px; margin-bottom: 140px">
    <i-button icon="md-done-all" @click="handleSelectAll(status)">全选</i-button>
    <i-button type="primary" @click="audit">审阅资料</i-button>

    <!-- 搜索框 -->
    <div style="width: 300px; float: right">
        <i-input search enter-button placeholder="姓名或证件号搜索" v-model="searchkey" />
    </div>
    <!-- 刷新 -->
    <div style="float: right; margin-right: 5px">
        <i-button @click="getData" icon="md-refresh">刷新</i-button>
    </div>

    <Modal v-model="showModal1" title="信息与资料" width="1000">
        <div v-if="haveOptionsData.length>0">
            <i-form label-position="right" :label-width="100" :inline="true" style="color: rgb(0, 0, 0)">
                <form-item label="姓名:">
                    <i-input v-model="showOneInfo.name" disabled> </i-input>
                </form-item>
                <form-item label="车主身份:">
                    <i-input v-model="showOneInfo.person_type" disabled> </i-input>
                </form-item>
                <form-item label="证件号:">
                    <i-input v-model="showOneInfo.certificate_id" disabled> </i-input>
                </form-item>
                <form-item label="手机号:">
                    <i-input v-model="showOneInfo.phone" disabled> </i-input>
                </form-item>
                <form-item label="所属单位:">
                    <i-input v-model="showOneInfo.unit" disabled> </i-input>
                </form-item>
                <form-item label="电动车牌照:">
                    <i-input v-model="showOneInfo.plate" disabled> </i-input>
                </form-item>
                <form-item label="所在校区:">
                    <i-input v-model="showOneInfo.campus" disabled> </i-input>
                </form-item>
                <form-item label="住址:">
                    <i-input v-model="showOneInfo.room" disabled> </i-input>
                </form-item>
                <form-item label="申请时间:">
                    <i-input v-model="showOneInfo.apply_time" disabled> </i-input>
                </form-item>
            </i-form>
            <i-form>
                <form-item label="颁发骑行证类型:">
                    <!-- @on-change="radioChange" -->
                    <radio-group v-model="passport_type">
                        <Radio ref="radio1" label="正式">
                            <span>正式</span>
                        </Radio>
                        <Radio ref="radio2" label="临时">
                            <span>临时</span>
                        </Radio>
                    </radio-group>
                </form-item>
            </i-form>
            <div style="display: flex; justify-content: space-between">
                <div>
                    <div>牌照证明:</div>
                    <a v-if="showOneInfo.licenseTag_path!=''" :href="showOneInfo.licenseTag_path" target="view_window">
                        <img style="width: 300px; height: auto" :src="showOneInfo.licenseTag_path" />
                    </a>
                    <a v-if="showOneInfo.licenseTag_path==''" href="images/404notFound.png" target="view_window">
                        <img style="width: 300px; height: auto" src="images/404notFound.png" />
                    </a>
                    <!-- <iframe :src="showOneInfo.licenseTag_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
                <div>
                    <div>车主身份证明:</div>
                    <a :href="showOneInfo.identification_paper_path" target="view_window"><img style="width: 300px; height: auto" :src="showOneInfo.identification_paper_path" /></a>
                    <!-- <iframe :src="showOneInfo.identification_paper_path" frameborder="0" height="400"
                        width="300"></iframe> -->
                </div>
                <div>
                    <div>车子来历证明:</div>
                    <a :href="showOneInfo.origin_evidence_path" target="view_window"><img style="width: 300px; height: auto" :src="showOneInfo.origin_evidence_path" /></a>
                    <!-- <iframe :src="showOneInfo.origin_evidence_path" frameborder="0" height="400" width="300"></iframe> -->
                </div>
            </div>
        </div>
        <Page ref="pages" :current="1" :total="this.haveOptionsData.length" :page-size="1" @on-change="changePage" simple style="text-align: center" />

        <div slot="footer">
            <i-button type="success" :loading="modal_loading" @click="pass" style="color: #fff">通过</i-button>
            <i-button type="error" :loading="modal_loading" @click="disqualify" style="color: #fff">不合格</i-button>
            <i-button :loading="modal_loading" @click="cancel">取消</i-button>
        </div>
    </Modal>
    <div style="margin-top: 20px; z-index: 10000">
        <i-col>
            <!-- 加载动效 -->
            <Spin fix v-if="spinShow">
                <div style="height: 110px">
                    <img class="loadImg spin-icon-load" src="images/轮.png" />
                </div>
                <p style="color: #999999">请求数据中</p>
            </Spin>
            <i-table height="500" stripe ref="selection" :columns="infoColumns" :data="showinfo" @on-selection-change="whichSelect"></i-table>
        </i-col>
    </div>
</div>

<script>
    new Vue({
        el: "#audit",
        data: {
            // 是否展示模态窗
            showModal1: false,
            // 模态窗按钮加载动效
            modal_loading: false,
            // 全选状态
            status: false,
            // 搜索的关键字
            searchkey: "",
            // 表格列的字段
            infoColumns: [{
                type: "selection",
                width: 60,
                align: "center",
            }, {
                title: "姓名",
                key: "name",
                width: "90px",
            }, {
                title: "人员类别",
                key: "person_type",
                width: "120px",
                filters: [{
                    label: "学生",
                    value: "学生",
                }, {
                    label: "教工",
                    value: "教工",
                }, {
                    label: "合同工",
                    value: "合同工",
                }, ],
                filterMethod(value, row) {
                    return row.person_type.indexOf(value) > -1;
                },
            }, {
                title: "证件号",
                key: "certificate_id",
                width: "180px",
            }, {
                title: "申请时间",
                key: "apply_time",
                sortable: "true",
                width: "200px",
            }, {
                title: "所属单位",
                key: "unit",
            }, {
                title: "牌照",
                key: "plate",
                width: "100px",
            }, {
                title: "所在校区",
                key: "campus",
            }, {
                title: "住址",
                key: "room",
            }, ],
            // 根据关键字过滤后展示的数据
            showinfo: [],
            // 后端请求到的全部数据
            info: [],
            // 是否展示spin遮罩（请求数据时）
            spinShow: true,
            // 选择的记录
            haveOptionsData: [],
            // 对话框中展示的记录
            showOneInfo: {},
            // 颁发骑行证类型
            passport_type: "",
        },
        methods: {
            // 关于清空iview的Radio组件的选中状态的调试
            // radioChange(which) {
            //     console.log(which);
            //     // currentValue的true或false决定选中状态
            //     console.log(this.$refs['radio1']);
            //     console.log(this.$refs['radio2']);
            // },

            handleSelectAll(status) {
                this.$refs.selection.selectAll(!status);
                this.status = !status;
            },
            audit() {
                var that = this;
                // console.log(this.haveOptionsData);
                if (that.haveOptionsData.length > 0) {
                    that.showModal1 = true;
                } else {
                    that.$Notice.warning({
                        title: "请选中至少一条记录审阅",
                        duration: 1.5,
                    });
                }
            },
            whichSelect(haveOptions) {
                this.haveOptionsData = haveOptions;
                console.log(this.haveOptionsData);
            },

            pass() {
                var that = this;
                that.modal_loading = true;
                if (that.passport_type == "") {
                    that.$Notice.warning({
                        title: "请选择颁发骑行证类型",
                    });
                } else {
                    console.log(that.showOneInfo._openid);
                    if (that.showOneInfo._openid == undefined) {
                        $.ajax({
                            url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/pass_audit_status",
                            data: {
                                id: that.showOneInfo.id,
                                passport_type: that.passport_type,
                                passport_id: that.passport_type == "正式" ?
                                    "O" + that.showOneInfo.certificate_id : "T" + that.showOneInfo
                                    .certificate_id,
                                email: that.haveOptionsData[that.$refs["pages"].currentPage - 1]
                                    .email,
                                name: that.haveOptionsData[that.$refs["pages"].currentPage - 1]
                                    .name,
                            },
                            type: "POST",
                            success(res) {
                                if (res.error_code == 0) {
                                    // 提示操作成功
                                    that.$Notice.success({
                                        title: res.msg,
                                    });
                                    // 重置对话框分页中的页数
                                    that.$refs["pages"].currentPage = 1;
                                    // 重置颁发的骑行证值
                                    that.passport_type = "";
                                    // 从数组中去掉该数据
                                    that.haveOptionsData.splice(
                                        that.$refs["pages"].currentPage - 1,
                                        1
                                    );
                                    // 刷新列表数据
                                    that.getData();
                                } else if (res.error_code == 1) {
                                    that.$Notice.error({
                                        title: res.msg,
                                    });
                                } else if (res.error_code == 2) {
                                    that.$Notice.warning({
                                        title: res.msg,
                                    });
                                } else if (res.error_code == 3) {
                                    that.$Notice.warning({
                                        title: res.msg,
                                    });
                                }
                            },
                            error() {
                                that.$Notice.error({
                                    title: "ajax请求失败",
                                });
                            },
                        });
                    } else {
                        //初始化
                        first = function(callback) {
                            var c1 = new cloud.Cloud({
                                //必填，表示是未登录模式
                                identityless: true,
                                //资源方 AppID
                                resourceAppid: "wx9653090528b58f4d",
                                //资源方环境 ID
                                resourceEnv: "cloud1-4gwqwv78b04dcc86",
                            });
                            c1.init();
                            //回调
                            callback(c1);
                        };
                        //回调使用完成初始化后，即可访问云数据库
                        callback = function(c1) {
                            // 发送邮件
                            $.ajax({
                                type: "POST",
                                url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/sendMail/sendPass",
                                data: {
                                    email: that.showOneInfo.email,
                                    name: that.showOneInfo.name,
                                },
                                success(resp) {
                                    if (resp.error_code == 0) {
                                        const db = c1.database();
                                        db.collection("applicationform")
                                            .doc(that.showOneInfo._id)
                                            .update({
                                                data: {
                                                    status: 1,
                                                    audit_time: new Date().toLocaleString(),
                                                    passport_id: that.passport_type == "正式" ?
                                                        "O" + that.showOneInfo.certificate_id : "T" + that.showOneInfo.certificate_id,
                                                    passport_type: that.passport_type,
                                                },
                                                success: (wxres) => {
                                                    that.$Notice.success({
                                                        title: resp.msg +
                                                            ",云数据库更改成功",
                                                    });
                                                    console.log("邮件发送成功");

                                                    // 重置对话框分页中的页数
                                                    that.$refs["pages"].currentPage = 1;
                                                    // 重置颁发的骑行证值
                                                    that.passport_type = "";
                                                    // 从数组中去掉该数据
                                                    that.haveOptionsData.splice(
                                                        that.$refs["pages"]
                                                        .currentPage - 1,
                                                        1
                                                    );
                                                    // 刷新列表数据
                                                    that.getData();
                                                },
                                                failed: (wxres) => {
                                                    that.$Notice.error({
                                                        title: resp.msg,
                                                    });
                                                },
                                            });
                                    } else {
                                        that.$Notice.error({
                                            title: "邮件发送失败，请重新审核",
                                        });
                                        console.log("邮件发送失败");
                                    }
                                },
                                error(resp) {
                                    console.log(resp);
                                },
                            });
                        };
                        first(callback);
                    }
                }

                that.modal_loading = false;
            },
            cancel() {
                // 关闭对话框
                this.showModal1 = false;
                // 重置接收radio数据的passport_type
                this.passport_type = "";
                // 重置当前页面为第一页
                this.$refs["pages"].currentPage = 1;
                // 重置显示的数据
                this.showOneInfo =
                    this.haveOptionsData[this.$refs["pages"].currentPage - 1];
                // 取消单选框的选择状态
                this.$refs["radio1"].currentValue = false;
                this.$refs["radio2"].currentValue = false;
            },
            disqualify() {
                var that = this;
                this.modal_loading = true;
                console.log(that.showOneInfo._openid);
                if (that.showOneInfo._openid == undefined) {
                    $.ajax({
                        url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/failed_audit_status",
                        data: {
                            id: that.showOneInfo.id,
                            email: that.haveOptionsData[that.$refs["pages"].currentPage - 1].email,
                            name: that.haveOptionsData[that.$refs["pages"].currentPage - 1]
                                .name,
                        },
                        type: "POST",
                        success(res) {
                            if (res.error_code == 0) {
                                that.$Notice.success({
                                    title: res.msg,
                                });
                                // 重置对话框分页中的页数
                                that.$refs["pages"].currentPage = 1;
                                // 重置颁发的骑行证值
                                that.passport_type = "";
                                // 从数组中去掉该数据
                                that.haveOptionsData.splice(
                                    that.$refs["pages"].currentPage - 1,
                                    1
                                );
                                // 刷新列表数据
                                that.getData();
                            } else if (res.error_code == 1) {
                                that.$Notice.warning({
                                    title: res.msg,
                                });
                            } else if (res.error_code == 2) {
                                that.$Notice.warning({
                                    title: res.msg,
                                });
                            } else if (res.error_code == 3) {
                                that.$Notice.error({
                                    title: res.msg,
                                });
                            }
                        },
                        error() {
                            that.$Notice.error({
                                title: "请求失败",
                            });
                        },
                    });
                } else {
                    //初始化
                    first = function(callback) {
                        var c1 = new cloud.Cloud({
                            //必填，表示是未登录模式
                            identityless: true,
                            //资源方 AppID
                            resourceAppid: "wx9653090528b58f4d",
                            //资源方环境 ID
                            resourceEnv: "cloud1-4gwqwv78b04dcc86",
                        });
                        c1.init();
                        //回调
                        callback(c1);
                    };
                    //回调使用完成初始化后，即可访问云数据库
                    callback = function(c1) {
                        // 发送邮件
                        $.ajax({
                            type: "POST",
                            url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/sendMail/sendFail",
                            data: {
                                email: that.showOneInfo.email,
                                name: that.showOneInfo.name,
                            },
                            success(resp) {
                                if (resp.error_code == 0) {
                                    const db = c1.database();
                                    db.collection("applicationform")
                                        .doc(that.showOneInfo._id)
                                        .update({
                                            data: {
                                                status: -1,
                                                audit_time: new Date().toLocaleString(),
                                            },
                                            success: (wxres) => {
                                                that.$Notice.success({
                                                    title: resp.msg + ",云数据库更改成功",
                                                });
                                                console.log("邮件发送成功");

                                                // 重置对话框分页中的页数
                                                that.$refs["pages"].currentPage = 1;
                                                // 重置颁发的骑行证值
                                                that.passport_type = "";
                                                // 从数组中去掉该数据
                                                that.haveOptionsData.splice(
                                                    that.$refs["pages"].currentPage - 1,
                                                    1
                                                );
                                                // 刷新列表数据
                                                that.getData();
                                            },
                                            fail: (wxres) => {
                                                that.$Notice.error({
                                                    title: resp.msg,
                                                });
                                            },
                                        });
                                } else {
                                    that.$Notice.error({
                                        title: "邮件发送失败，请重新审核",
                                    });
                                    console.log("邮件发送失败");
                                }
                            },
                            error(resp) {
                                console.log(resp);
                            },
                        });
                    };
                    first(callback);
                }

                that.modal_loading = false;
            },
            changePage(page) {
                // console.log(page);
                this.passport_type = "";
                // 当前页的展示对象
                this.showOneInfo = this.haveOptionsData[page - 1];
                // 取消单选框的选择状态
                this.$refs["radio1"].currentValue = false;
                this.$refs["radio2"].currentValue = false;
            },

            getData() {
                var that = this;
                // 数组[]才有splice函数，对象没有
                that.info.splice(0, that.info.length); //清空数组
                that.spinShow = true;
                that.$Loading.start();
                $.ajax({
                    url: "http://3v.gsdse.cn/UEBIMP/public/index.php/index/Info/select",
                    data: {
                        audit_status: 0,
                    },
                    type: "post",
                    success(res) {
                        if (res.error_code == 0) {
                            console.log(res.msg);
                            that.info = res.data;
                            console.log(that.info);
                            //初始化
                            first = function(callback) {
                                var c1 = new cloud.Cloud({
                                    //必填，表示是未登录模式
                                    identityless: true,
                                    //资源方 AppID
                                    resourceAppid: "wx9653090528b58f4d",
                                    //资源方环境 ID
                                    resourceEnv: "cloud1-4gwqwv78b04dcc86",
                                });
                                c1.init();
                                //回调
                                callback(c1);
                            };
                            //回调使用完成初始化后，即可访问云数据库
                            callback = function(c1) {
                                const db = c1.database();
                                db.collection("applicationform")
                                    .where({
                                        status: 0,
                                    })
                                    .get({
                                        success: (wxres) => {
                                            console.log(wxres.data);
                                            that.info = that.info.concat(wxres.data);
                                        },
                                        fail: (wxres) => {
                                            console.log(wxres);
                                        },
                                    });
                            };
                            first(callback);
                        } else if (res.error_code == 1) {
                            console.log(res.msg);
                        } else if (res.error_code == -1) {
                            console.log(res.msg);
                        }
                    },
                    error(res) {
                        console.log("请求失败" + res);
                    },
                    complete() {
                        that.$Loading.finish();
                        that.spinShow = false;
                    },
                });
            },
        },
        watch: {
            info: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info;
                },
            },
            searchkey: {
                immediate: true,
                handler(newValue, oldValue) {
                    this.showinfo = this.info.filter((p) => {
                        return (
                            p.name.indexOf(newValue) !== -1 ||
                            p.certificate_id.indexOf(newValue) !== -1
                        );
                    });
                },
            },
            haveOptionsData: {
                handler(newValue, oldValue) {
                    var that = this;
                    console.log(that.haveOptionsData);
                    if (that.haveOptionsData.length > 0) {
                        that.showOneInfo =
                            that.haveOptionsData[that.$refs["pages"].currentPage - 1];
                    } else {
                        that.showOneInfo = {};
                    }
                },
            },
            showOneInfo: {
                handler(newValue, oldValue) {
                    console.log(newValue);
                },
            },
            passport_type: {
                handler(newValue, oldValue) {
                    console.log(this.passport_type);
                },
            },
        },

        mounted: function() {
            this.getData();
        },
    });
</script>